<template>
  <div class="common-tab-bar" :style="{ marginBottom: getSafeBottom() + 'px' }">
    <div class="tab-bar-wrapper">
      <div
        class="tab-item"
        v-for="item in list"
        :key="item.url"
        @click="onTabClick(item)"
      >
        <img class="tab-icon" :src="currentSrc(item)" />
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSystemInfo } from "@/hooks/useSystemInfo";
import { useRouter } from "@/hooks/useRouter";
import { isAuth } from "@/hooks/useLogin";

interface TabData {
  url: string;
  label: string;
  icon: string;
  selectIcon: string;
}

const router = useRouter();
const route = getCurrentPages();

const { getSafeBottom } = useSystemInfo();

const onTabClick = (tabData: TabData) => {
  if (tabData.url.indexOf(route[0].route || "") > -1) {
    return;
  }
  if (tabData.label === "个人中心" && !isAuth()) return;
  router.redirect({ path: tabData.url });
};

const currentPageRoute = route[route.length - 1].route

const currentSrc = (item: any) => {
  return `/${currentPageRoute}` === item.url ? item.selectIcon : item.icon;
};

const list: TabData[] = [
  {
    url: "/pages/home/index",
    label: "首页",
    icon: "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/5.png",
    selectIcon:
      "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/6.png",
  },
  {
    url: "/pages/product/index",
    label: "产品分类",
    icon: "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/1.png",
    selectIcon:
      "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/2.png",
  },
  {
    url: "/pages/memberPoints/index",
    label: "积分商城",
    icon: "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/3.png",
    selectIcon:
      "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/4.png",
  },
  {
    url: "/pages/personal/index",
    label: "个人中心",
    icon: "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/7.png",
    selectIcon:
      "https://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/22/8.png",
  },
];
</script>

<style lang="less" scoped>
.common-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .tab-bar-wrapper {
    width: 100%;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px -5px 5px 0px rgba(54, 38, 79, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    .tab-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 10px;
      .tab-icon {
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-bottom: 6px;
      }
    }
  }
}
</style>
